<template>

  <div class="login-contain">
    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="login-form">
      <el-form-item prop="username">
        <i class="fa fa-user"></i>
        <el-input v-model.number="loginForm.username" ref="username" aria-placeholder="账号"></el-input>
      </el-form-item>
      <!--<el-tooltip v-model="capsTooltip" content="已被锁定" placement = "right" manual>-->

      <el-form-item prop="password">
        <i class="fa fa-lock"></i>
        <el-input type="password" v-model="loginForm.password"
                  auto-complete="on" aria-placeholder="密码"
                  ref="password"
                  @keyup.enter.native="handleLogin"
        ></el-input>
      </el-form-item>
      <!--</el-tooltip>-->

      <el-form-item>
        <el-button type="primary" :loading="loading" @click.native.prevent="handleLogin">提交</el-button>
        <!--<el-button @click="resetForm('loginForm')">重置</el-button>-->
      </el-form-item>
      <!--<div style="text-align: center;cursor: pointer;" @click="registerUser">注册</div>-->
    </el-form>
  </div>
</template>
<script>
  import {setCookie} from '../libs/cookie';
  import {login} from '../api/login';
  import {getMenuRoute} from '@/api/sys/menuApi';
  import store from '../store/index';


  export default {
    data () {
      let checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'))
        } else {
          callback()
        }
      };
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      };

      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {validator: checkName, trigger: 'blur'}
          ],
          password: [
            {validator: validatePass, trigger: 'blur'}
          ]
        },
        capsTooltip: false,
        loading: false
      }
    },
    methods: {
      handleLogin: function () {
        let _this = this
        _this.loading = true
        _this.$refs.loginForm.validate((valid) => {
          if (valid) {
            login(_this.loginForm).then(res => {
              if (res.code === 200) {
                _this.loading = false
                setCookie('token', res.token)
                setCookie('user', _this.loginForm.username)
                _this.$router.push({name: 'home'})
                //设置动态路由
                getMenuRoute({}).then(res => {
                  if (res.code === 200) {
                    _this.fnAddDynamicMenuRoutes(res.data);
                  }
                })
              } else {
                _this.$message.error(res.msg)
                console.log(res)
              }
              _this.loading = false
            })
          } else {
            _this.loading = false
            console.log('error submit!!')
            return false
          }
        })
      },
      //添加动态路由
      fnAddDynamicMenuRoutes: function (menuList) {
        for (let i = 0; i < menuList.length; i++) {
          let route = {
            path: menuList[i].route,
            component: () => import(`@/view/Main`),
            name: menuList[i].route.replace('/', ''),
            meta: {
              title: menuList[i].name,
              breadcrumb: true
            }
          };
          //存在子路由
          if (menuList[i].children && menuList[i].children.length >= 1) {
            let childrenRouteList = [];
            let childrenList = menuList[i].children;
            for (let j = 0; j < childrenList.length; j++) {
              let component = childrenList[j].route;
              let path = childrenList[j].route.split('/');
              childrenRouteList.push({
                path: path[path.length-1],
                name: path[path.length-1],
                component: () => import(`@/view${component}`),
                meta: {
                  title: childrenList[j].name,
                  breadcrumb: true,
                }
              })
            }
            route.children = childrenRouteList
          }
          this.$router.options.routes.push(route)
        }
        //添加路由并设置404页面
        this.$router.addRoutes(this.$router.options.routes.concat([{
          path:'*',
          redirect:'/404'
        }]));
        this.$router.options.isAddDynamicMenuRoutes = true;
      },
      registerUser: function () {
        this.$router.push({name: 'home'})
      }
    }
  }
</script>
<style lang="less">
  .login-contain .el-form-item {
    border: 1px solid hsla(0, 0%, 100%, .1);
    background: rgba(0, 0, 0, .1);
    border-radius: 5px;
    color: rgb(136, 154, 164);
  }

  .login-contain .el-input {
    width: 85%;
  }

  .login-contain .el-input input {
    background-color: transparent;
    border: none;
  }

  .login-contain .el-form-item__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .login-contain i {
    font-size: 22px;
  }

  .login-contain .el-form-item__content button {
    width: 100%;
  }
</style>
<style lang="less" scoped>
  .login-contain {
    width: 100%;
    height: 100%;
    background-color: #2d3a4b;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
  }

  .login-contain:before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .login-contain .login-form {
    width: 400px;
    margin-left: calc(50% - 260px);
    max-width: 100%;
    padding: 20px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    display: inline-block;
    vertical-align: middle;
  }
</style>

